<template>
	<div class="dashboard">
		<!-- 导航部分 -->
		<div class="nav">
			<!-- 导航左侧按钮 -->
			<div class="nav-part nav-left">
				<div
					class="nav-item"
					v-for="(item, index) in leftItems"
					:key="index"
					:style="{
						'background-image': `url(${item.id === selectedItem.id ? itemLeftSelect : itemLeftNormal})`,
						'margin-right': index === leftItems.length - 1 ? '5%' : 0,
					}"
					@click="selectedItem = item"
				>
					<div class="title">{{ item.title }}</div>
				</div>
			</div>
			<!-- 导航中间标题 -->
			<div class="nav-part nav-center">
				<div class="title navTitle">{{ navTitle }}</div>
			</div>
			<!-- 导航右侧按钮 -->
			<div class="nav-part nav_right">
				<div
					class="nav-item"
					v-for="(item, index) in rightItems"
					:key="index"
					:style="{
						'background-image': `url(${item.id === selectedItem.id ? itemRightSelect : itemRightNormal})`,
						'margin-left': index === 0 ? '5%' : 0,
					}"
					@click="selectedItem = item"
				>
					<div class="title">{{ item.title }}</div>
				</div>
			</div>
		</div>

		<!-- 页面组件部分 -->
		<component class="page" v-if="selectedItem && selectedItem.component" :is="selectedItem.component"></component>
		<!-- 功能建设中 -->
		<el-tag type="warning" size="large" v-else>
			{{ `「${selectedItem.title}」功能建设中...` }}
		</el-tag>
	</div>
</template>
  
<script>
import itemLeftSelect from '/@/assets/bottleDashboard/nav-item-left-selected.png';
import itemLeftNormal from '/@/assets/bottleDashboard/nav-item-left.png';
import itemRightSelect from '/@/assets/bottleDashboard/nav-item-right-selected.png';
import itemRightNormal from '/@/assets/bottleDashboard/nav-item-right.png';

import { markRaw } from 'vue';
import page1 from '/@/jqkit/jqkDashboard/dashboardPage1.vue';
import page2 from '/@/jqkit/jqkDashboard/dashboardPage2.vue';

export default {
	name: 'Dashboard',
	components: {
		page1,
		page2,
	},
	data() {
		return {
			// 导航标题
			navTitle: '可视化大屏系统模版',
			// 导航两侧按钮数据项，
			leftItems: [
				{ id: 1, title: '子页面一', component: markRaw(page1) },
				{ id: 2, title: '子页面二', component: markRaw(page2) },
				{ id: 3, title: '子页面三', component: null },
				{ id: 4, title: '子页面四', component: null },
			],
			rightItems: [
				{ id: 5, title: '子页面五', component: null },
				{ id: 6, title: '子页面六', component: null },
				{ id: 7, title: '子页面七', component: null },
				{ id: 8, title: '子页面八', component: null },
			],
			// 当前选中数据项
			selectedItem: null,
			// 导航按钮普通&选中背景
			itemLeftSelect: itemLeftSelect,
			itemLeftNormal: itemLeftNormal,
			itemRightSelect: itemRightSelect,
			itemRightNormal: itemRightNormal
		};
	},
	watch: {},
	created() {
		this.initData();
	},
	methods: {
		initData() {
			// 当前案例最多适配 5 项
			if (this.leftItems.length > 5) {
				this.leftItems = this.leftItems.slice(0, 5);
			}
			if (this.rightItems.length > 5) {
				this.rightItems = this.rightItems.slice(0, 5);
			}
			// 默认取数组第 1 项
			if (this.leftItems && this.leftItems.length) {
				this.selectedItem = this.leftItems[0];
			} else if (this.rightItems && this.rightItems.length) {
				this.selectedItem = this.rightItems[0];
			}
		}
	}
};
</script>
  
<style lang="scss">
#app {
	overflow-x: scroll;
}
#app::-webkit-scrollbar {
	display: none;
}
.dashboard {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	// 3840 × 886
	width: 433.41vh !important; // 3840 / 886
	height: 100vh;
	background-image: url('@/assets/bottleDashboard/background.jpg');
	background-size: cover;
	overflow-y: hidden;
	.nav {
		position: absolute;
		top: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		// 8419 × 253
		width: 95.97%; // (8419 / (253 / (886 * 12.50%))) / 3840 * 100%
		height: 12.5%;
		background-image: url('@/assets/bottleDashboard/nav-background.png');
		background-size: cover;
		.nav-part {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
		// 导航栏背景图不居中，flex 数值微调
		.nav-left {
			// flex: 1.5;
			flex: 1.45;
			justify-content: flex-end;
			// border: 1px dashed red;
		}
		.nav-center {
			flex: 1;
			// border: 1px dashed red;
		}
		.nav_right {
			// flex: 1.5;
			flex: 1.44;
			justify-content: flex-start;
			// border: 1px dashed red;
		}
		.nav-item {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			margin: 1% 1% 0 1%;
			height: 63.2%;
			min-width: 20%;
			background-size: cover;
		}
		.title {
			font-family: AlibabaPuHuiTi-Bold;
			font-weight: bold;
			font-size: 2.82vh; // 5.64 / 2
			color: white;
			text-align: center;
			background: -webkit-linear-gradient(#ffffff, #caf7ff, #459efc, #b8dbff); /* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(#ffffff, #caf7ff, #459efc, #b8dbff); /* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(#ffffff, #caf7ff, #459efc, #b8dbff); /* Firefox 3.6 - 15 */
			background: linear-gradient(#ffffff, #caf7ff, #459efc, #b8dbff); /* 标准语法 */
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.navTitle {
			font-size: 5.64vh; // 50 / 886
			// padding-bottom: 1.5%;
		}
	}
	.page {
		position: absolute;
		top: 12.5%;
		width: 100%;
		height: 87.5%;
	}
}
</style>